<script setup lang='tsx' name='SongList'>
import { ref, reactive, computed } from 'vue';
import { HeartOutline, Play } from "@vicons/ionicons5";
import { Download } from '@vicons/carbon'
import { SheetDetail, Track } from '../types';
import { handlePlayTimeFormat } from '@/utils/index';
import usePlayerStore from '@/store/modules/player';
import { SoundFilled } from '@vicons/antd'
import { storeToRefs } from 'pinia';
type Props = {
    songlist: Track[]
}
const playerStore = usePlayerStore()
const { playDetail } = storeToRefs(playerStore)
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits([])
const columns = [
    {
        title: '',
        key: 'key',
        render: (_: Track, index: number | string) => {
            index = (index as number + 1) > 9 ? index as number + 1 : ('0' + (index as number + 1))
            // return `${index + 1}`
            return (<span class='sort-type'>
                <span v-show={playDetail.value.currentSongId !== _.id} class='sort'>{index}</span>
                <n-icon v-show={playDetail.value.currentSongId == _.id} size='20' class='cursor-pointer' color='#ec4141'><SoundFilled /></n-icon>
                <n-icon size='20' class='cursor-pointer'><HeartOutline /></n-icon>
                <n-icon size='20' class='cursor-pointer'><Download /></n-icon>
            </span>)
        }
    },
    {
        title: '音乐标题',
        key: 'name',
        ellipsis: true
    },
    {
        title: '歌手',
        key: 'artist',
        render: (_, index) => {
            return _.ar.map(item => item.name).join(' / ')
        },
        ellipsis: true
    },
    {
        title: '专辑',
        key: 'album',
        render: (_, index) => {
            return _.al.name
        },
        ellipsis: true
    },
    {
        title: '时长',
        key: 'time',
        render: (_, index) => {
            return handlePlayTimeFormat(parseInt(String(_.dt / 1000)))
        }
    },
]
const rowProps = (row: Track) => {
    return {
        onDblclick(e: MouseEvent) {
            console.log(row);
            playerStore.playList.push(row)
            playerStore.playDetail.currentSongId = row.id
        }
    }
}
const pageInfo = reactive({
    page: 1,
    pageSize: 10,
})
const showSongList = computed(() => {
    return props.songlist.slice((pageInfo.page - 1) * pageInfo.pageSize, pageInfo.page * pageInfo.pageSize)
})
</script>

<template>
    <div class='song-list'>
        <n-data-table :bordered="false" single-column :columns="columns" :data="showSongList" striped
            :rowProps="rowProps" />
        <n-space justify="center" style="margin: 24px;">
            <n-pagination v-model:page="pageInfo.page" :page-size="pageInfo.pageSize" :page-sizes="[5, 10, 15, 20]"
                :display-order="['quick-jumper', 'pages', 'size-picker']"
                :page-count="Math.ceil(songlist.length / pageInfo.pageSize)" show-quick-jumper show-size-picker />
        </n-space>
    </div>
</template>

<style lang='scss' >
.sort-type {
    color: #b5b5b5;
    display: flex;
    align-items: center;
    gap: 12px;

    .sort {
        color: #b5b5b5 !important;
        vertical-align: middle;
    }
}
</style>